<template>
  <div class="rednest">
    <el-row :gutter="1">
      <el-col :span="18">
        <div class="grid-content bg-purple fist-grid-content">
          <div class="authorInformation">
            <img :src='topicContent.url' height="100px">
            <p>{{topicContent.author}}</p>
          </div>
          <div class="thematicContent">
            <h2>{{topicContent.title}}</h2>
            <p>{{topicContent.content}}</p>
          </div>
          <div style="clear:both;"></div>
        </div>
        <!-- 评论区 -->
        <div class="grid-content bg-purple">
          <el-form ref="form" :model="comment" label-width="80px">
            <el-row>
              <el-form-item label="评论区">
                <el-input type="textarea" size="small" autosize :rows="2"
                          placeholder="想说就说，杜绝键盘侠，杜绝喷子，世界和平..."
                          v-model="comment.textarea" style="max-width: 98%">
                </el-input>
                <el-button type="info" size="mini" style="float: right;margin: 1%"  @click="commentSubmit">提交</el-button>
              </el-form-item>
            </el-row>
          </el-form>
          <div>
            <ul class="commentFirstUl">
              <li v-for="(commentItem,index) in commentContent" :key="index">
                    <div>
                      <img :src='commentItem.img'>
                      <span>{{commentItem.author}}</span>
                      <span>{{commentItem.comment}}</span>
                      <el-button type="text" ref="dataIndex" @click="answerEvent(index)" :index="index">回复</el-button>
                      <div v-show="answerShow===index">
                        <el-form ref="form" :model="answer" label-width="62px">
                          <el-form-item>
                            <el-input type="textarea" size="small" autosize :rows="2"
                                      placeholder="想说就说，杜绝键盘侠，杜绝喷子，世界和平..."
                                      v-model="answer.answerTextarea" style="max-width: 98%;margin-left: 10px">
                            </el-input>
                            <el-button type="info" size="mini" style="float: right;margin: 1%" @click="answerSubmit(index)">提交</el-button>
                          </el-form-item>
                        </el-form>
                      </div>
                    </div>
                  <div style="clear: both"></div>
                  <ul class="commentLastUl">
                    <li v-for="(cItem,index) in commentItem.commentArray" :key="index">
                      <div>
                        <img :src='cItem.img'>
                        <span>{{cItem.author}}</span>
                        <span>{{cItem.comment}}</span>
                      </div>
                    </li>
                  </ul>
              </li>
            </ul>

          </div>

        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <div class="newsSidebar">
            <p>今日推荐</p>
            <ul class="newsSidebarUl">
              <li v-for="topicItem in topicSecommend" :key="topicItem.url">
                <span>{{topicItem.url}}</span>
              </li>
            </ul>
          </div>
          <div style="clear:both;"></div>
        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script>
    export default {
      name: "topicDetails",
      data() {
        return {
          topicContent: {
              title:'titletitletitletitletitletitletit' +
                'letitletitletitletitletitletitletit' +
                'letitletitletitletitletitletitletit' +
                'letitletitletitletitletitletitle',
              content:'contentcontentcontentcontentc' +
                'ontentcontentcontentcontentcontentc' +
                'ontentcontentcontentcontentcontentco' +
                'ntentcontentcontentcontentcontentcon' +
                'tentcontentcontentcontentcontentconte' +
                'ntcontentcontentcontentcontentconten' +
                'tcontentcontentcontentcontent',
              url: require("../img/lunbo1.jpg"),
              author:'author',
              time:'time',
            },
          topicSecommend:[
            {url:'推荐1'},
            {url:'推荐2'}
          ],
          //评论
          comment:{
            textarea: '',
          },
          answer:{
            //评论回复
            answerTextarea:''
          },
          answerShow:-1,
          commentContent:[
            {
              comment:'第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复',
              author:'作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者',
              img:'urlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurl',
              commentArray:[
                {
                  comment:'子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复子回复',
                  author:'子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者子作者',
                  img:'子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url子url',
                }
              ]
            },
            {
              comment:'第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复第一个回复',
              author:'作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者作者',
              img:'urlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurlurl',
              commentArray:[
                {
                  comment:'',
                  author:'',
                  img:'',
                }
              ],

            },
          ]
        }
      },
      methods:{
        //点击评论
        commentSubmit(){
          console.log("打印评论"+this.comment.textarea);
          let comment = this.comment.textarea;
          if (comment == ''){
            return;
          }
          let commentObject ={
            comment:comment,
            author:'作者',
            img:'ul',
            commentArray:[]
          };
          this.commentContent.unshift(commentObject);
          this.comment.textarea='';

        },
        //点击回复
        answerEvent(index){
          this.answerShow=index;
        },
        //点击回复提交
        answerSubmit(index){
          console.log("打印回复"+this.answer.answerTextarea);
          let answer = this.answer.answerTextarea;
          if (answer == ''){
            this.answerShow=-1;
            return;
          }
          let answerObject ={
            comment:answer,
            author:'1',
            img:'1',
          };
          this.commentContent[index].commentArray.push(answerObject);
          this.answer.answerTextarea='';
          this.answerShow=-1;

        }
      }
    }
</script>

<style scoped>
  .fist-grid-content{
    background-color: rgba(255, 192, 203, 0.65);
  }
  .authorInformation{
  display: inline-block;
  float: left;
  margin: 2% 1% 1% 2%;
}
  .thematicContent{
    text-align: left;
    width: 95%;
  }
  .thematicContent h2,p{
    word-wrap:break-word
  }
  .commentFirstUl,.commentLastUl{
    list-style: none;
    text-align: left;
    margin: 1% 0px;
  }
  .commentFirstUl{
    padding: 1em;
  }

</style>
